<template>

	<div >
		<div style="float:left;padding-top:16px;">
			<el-button type="primary" style="padding-left:20px;padding-right:20px;font-size:15px;
        line-height:15px;" @click="dialogFormVisible = true ">录入成绩</el-button>
			<el-dialog title="录入成绩" :visible.sync="dialogFormVisible">
				<el-form :model="ruleForm2" status-icon :rules="rules3" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
					<el-form-item label="学号" prop="studentId">
						<el-input v-model.number="ruleForm2.studentId"></el-input>
					</el-form-item>
					<el-form-item label="姓名" prop="studentName">
						<el-input v-model.number="ruleForm2.studentName"></el-input>
					</el-form-item>
					<el-form-item label="分数" prop="scoreCredit">
						<el-input v-model.number="ruleForm2.scoreCredit"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
						<el-button @click="dialogFormVisible=false">取消</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
		</div>
		<div style="padding-bottom:80px;padding-top:10px;">
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-input v-model="formInline.studentId" placeholder="请输入学号" style="width:200px;"></el-input>
				<el-input v-model="formInline.studentName" placeholder="请输入名字" style="width:200px;"></el-input>
				<el-button type="primary" style="padding-left:20px;padding-right:20px;font-size:15px;
        line-height:15px;" @click="demand">搜索</el-button>
			</el-form>
		</div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column label="学号" width="180">
				<template slot-scope="scope">
					<span style="margin-left: 10px">{{ scope.row.studentId }}</span>
				</template>
			</el-table-column>
			<el-table-column label="姓名" width="180">
				<template slot-scope="scope">
					<span style="margin-left: 10px">{{ scope.row.student.studentName }}</span>
				</template>
			</el-table-column>

			<el-table-column label="成绩" width="180">
				<template slot-scope="scope">
					<span style="margin-left: 10px">{{ scope.row.scoreCredit }}</span>
				</template>
			</el-table-column>
			<el-table-column label="所属课程">
				<template slot-scope="scope">
					<span style="margin-left: 10px">{{ scope.row.course.courseName }}</span>
				</template>
			</el-table-column>

			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="primary" icon="el-icon-edit" @click="tostudentUpdate(scope.row)"></el-button>
					<el-dialog title="修改成绩" :visible.sync="modification">
						<el-form :model="ruleForm3" status-icon :rules="rules3" ref="ruleForm3" label-width="100px" class="demo-ruleForm">
							<el-form-item label="学号" prop="studentId">
								<el-input v-model="ruleForm3.studentId"></el-input>
							</el-form-item>
							<el-form-item label="姓名" prop="studentName">
								<el-input v-model="ruleForm3.studentName"></el-input>
							</el-form-item>
							<el-form-item label="所属课程" prop="courseName">
								<el-input v-model="ruleForm3.courseName"></el-input>
							</el-form-item>
							<el-form-item label="分数" prop="scoreCredit">
								<el-input v-model="ruleForm3.scoreCredit"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="submitFormUpdate('ruleForm3')">提交</el-button>
								<el-button @click="modification=false">取消</el-button>
							</el-form-item>
						</el-form>
					</el-dialog>
				</template>
			</el-table-column>

			<el-pagination background layout="prev, pager, next" :total="1000">
			</el-pagination>
		</el-table>
		<!--分页-->
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import { scoreList } from '@/axios/api'
	import { scoreInsert } from '@/axios/api'
	import { scoreIdName } from '@/axios/api'
	import { scoreUpdate } from '@/axios/api'
	export default {
		data() {
			var checkAge = (rule, value, callback) => {
				if(value == '') {
					return callback(new Error('学号不能为空'));
				}
				callback();
			};
			var checkAge2 = (rule, value, callback) => {
				if(!value) {
					return callback(new Error('姓名不能为空'));
				}
				callback();
			};
			var checkAge3 = (rule, value, callback) => {
				if(value == '') {
					return callback(new Error('分数不能为空'));
				}
				callback();
			};
			var checkAge4 = (rule, value, callback) => {
				if(!value) {
					return callback(new Error('所属课程不能为空'));
				}
				callback();
			};

			return {
				currentPage: 1,
				pageIndex: 1,
				pageSize:10,
				total: 0,
				tableData: [],
				dialogFormVisible: false,
				modification: false,
				ruleForm2: {
					studentId: '',
					studentName: '',
					scoreCredit: ''
				},
				formInline: {
					studentId: '',
					studentName: ''
				},
				ruleForm3: {
					studentId: '',
					studentName: '',
					courseName: '',
					scoreCredit: ''
				},
				rules2: {

					age: [{
						validator: checkAge,
						trigger: 'blur'
					}],
					Name: [{
						validator: checkAge2,
						trigger: 'blur'
					}],
					grade: [{
						validator: checkAge3,
						trigger: 'blur'
					}],
				},
				rules3: {

					studentId: [{
						validator: checkAge,
						trigger: 'blur'
					}],
					studentName: [{
						validator: checkAge2,
						trigger: 'blur'
					}],
					courseName: [{
						validator: checkAge4,
						trigger: 'blur'
					}],
					scoreCredit: [{
						validator: checkAge3,
						trigger: 'blur'
					}],
				},
			};
		},
		methods: {
			demand() {
				let params = {
					pageIndex: this.pageIndex,
					id: this.formInline.studentId,
					name: this.formInline.studentName
				}
				console.log(params);
				scoreList(params).then(res => {
					console.log(res);
					this.tableData = res.resData.list;
					this.pageSize = res.resData.pageSize;
					this.total = res.resData.total;
				})
			},

			/**
			 *显示成绩信息和根据学生ID或学生名字查询
			 *
			 */
			scoreList() {

				let params = {
					pageIndex: this.pageIndex,
					id: this.formInline.studentId,
					name: this.formInline.studentName
				}
				console.log(params);
				scoreList(params).then(res => {
					console.log(res);
					this.tableData = res.resData.list;
					this.pageSize = res.resData.pageSize;
					this.total = res.resData.total;
				})
			},
			/*添加*/
			 submitForm(formName) {
        	this.$refs[formName].validate((valid) => {
          	if (valid) {
            	this.$message({
							message: '添加成功',
								type: 'success'
							});
				this.dialogFormVisible=false;
         	 } else {
           	 this.$message({
							message: '添加失败',
								type: 'info'
							});
            	return false;
          	}
       		 });
    		  },
			
			
			/*修改*/
			tostudentUpdate(row){
				this.ruleForm3.studentId=row.studentId,
				this.ruleForm3.	studentName=row.student.studentName,
				this.ruleForm3.	courseName=row.course.courseName,
				this.ruleForm3.	scoreCredit=row.scoreCredit,
				console.log(this.ruleForm3),
				this.modification=true
			},
			 submitFormUpdate(formName) {
        	this.$refs[formName].validate((valid) => {
          	if (valid) {
            	this.$message({
							message: '修改成功',
								type: 'success'
							});
				this.modification=false;
         	 } else {
           	 this.$message({
							message: '修改失败',
								type: 'info'
							});
            	return false;
          	}
       		 });
    		  },
			
			
			
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.pageIndex=val;
				this.scoreList();
			},

		},
		mounted() {
			//            这里的代码一刷新页面就会加载
			//可以写一些初始化方法
			this.scoreList();
			let user = localStorage.getItem('teacher-user');
			if(user) {
				user = JSON.parse(user);
				this.teacherId=user.teacherId
			}
		}
	}
</script>

<style>

</style>